<template>
  <div class="login-container">
    <p v-if="error" class="error-banner">{{ error }}</p>
    <img src="../assets/logo.jpeg" alt="悦 ERP Logo" class="fixed-logo" />
    
    <div class="login-form-wrapper">
      <h2 class="login-title">悦心ERP</h2>
      <form @submit.prevent="handleLogin" class="login-form">
        <div class="form-group">
          <input type="text" id="username" v-model="formData.username" placeholder="ERP 用户名" required />
          <label for="username" class="floating-label"/>
        </div>

        <div class="form-group">
          <input type="password" id="password" v-model="formData.password" placeholder="密码" required />
          <label for="password" class="floating-label"/>
        </div>

        <button type="submit" class="login-button">悦心登录</button>

        

        <div class="remember-me">
          <input type="checkbox" id="rememberMe" v-model="rememberMe" />
          <label for="rememberMe">记住我</label>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

interface FormData {
  username: string
  password: string
}

const formData = ref<FormData>({
  username: '',
  password: ''
})

const error = ref<string | null>(null)
const router = useRouter()
const rememberMe = ref(false)

const handleLogin = async () => {
  error.value = null

  if (!formData.value.username || !formData.value.password) {
    error.value = '请输入用户名和密码'
    return
  }

 
    const response = await fetch('http://localhost:8080/login/auth/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        username: formData.value.username,
        password: formData.value.password
      })
    })

    const result = await response.json()

    if (result.code !=200) {
     error.value = result.message
     setTimeout(() => {
      error.value = ''
     }, 3000)
     return
    }

  
    // 例如保存 token
     localStorage.setItem('token', result.data.token)

    router.push('/home')
 
}
</script>

<style scoped>
.login-container {
  position: relative;
  width: 100vw;
  height: 100vh; /* 固定高度 */
  display: flex;
  justify-content: flex-end;
  align-items: center;

  background-image: url('../assets/background.jpeg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  box-sizing: border-box;
}

.login-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 0;
}

.fixed-logo {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 80px;
  height: auto;
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 5px;
}

/* 关键改动：使用 flex 布局，垂直居中整个表单内容 */
.login-form-wrapper {
  background: rgba(0, 0, 0, 0.7);
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  max-width: 400px;
  width: 100vw;
  margin-right: 2%;
  position: relative;
  z-index: 1;
  max-height: 100vh;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

@media (max-width: 768px) {
  .login-container {
    justify-content: center;
    background-position: 50% center;
  }
  
  .login-form-wrapper {
    margin-right: 0;
    width: 100%;
    max-width: none;
    padding: 25px;
    margin-top: 80px;
  }
}

@media (min-width: 1920px) {
  .login-container {
    background-size: 100% auto;
  }
}

.login-title {
  color: #fff;
  margin: 0 0 30px 0;
  font-size: 28px;
  font-weight: 500;
}

.form-group {
  position: relative;
  margin-bottom: 25px;
  width: 100%;
}

input {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  border: 1px solid #4a4a4a;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.floating-label {
  position: absolute;
  top: 15px;
  left: 15px;
  color: #aaa;
  transition: 0.2s ease;
}

input:focus + .floating-label,
input:not(:placeholder-shown) + .floating-label {
  top: -10px;
  font-size: 14px;
  color: #42b983;
}

.login-button {
  background: linear-gradient(135deg, #42b983, #34a853);
  color: white;
  padding: 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
}

/* 重点：错误提示样式，保证颜色鲜明且上下有足够间距，居中显示 */
.error-banner {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f44336; /* 推荐背景色 */
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 999;
  text-align: center;
}



.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ccc;
  margin-top: 15px;
  font-size: 14px;
  justify-content: center;
  width: 100%;
}

.remember-me input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #42b983;
}
</style>
